<!--
  首页
 -->
<template>
  <div class="index">
    <div class="article">
      <div class="article-item" v-for="(item,index) in 10">
        <div class="title">一些javascript的知识点</div>
        <ul class="desc">
          <li class="hidden-sm-and-down">
            <i class="jcfont jcwancheng" :style="{color:'rgba(238, 147, 159, 1.0)'}"></i>
            Posted on 2020/06/15
          </li>

          <li>
            <i class="jcfont jcweiwancheng" :style="{color:'rgba(106, 50, 174, 0.5)'}"></i>
            <span class="hidden-sm-and-down">Post modified:</span> 2020/06/15
          </li>
          <li>
            <i class="jcfont jcfenlei-copy" :style="{color:'rgba(41, 174, 119, 1.0)'}"></i>
            <span class="hidden-sm-and-down">分类: </span>javascript
          </li>
          <li>
            <i class="jcfont jcchakan" :style="{color:'rgba(152, 174, 54, 1.0)'}"></i>
            <span class="hidden-sm-and-down">浏览: </span>99
          </li>
          <li>
            <i class="jcfont jc16" :style="{color:'rgba(174, 97, 33, 1.0)'}"></i>
            <span class="hidden-sm-and-down">评论: </span>99
          </li>
        </ul>
        <!--  -->
        <div class="fragment">
          开发调试1.Eruda库，star 8.4K迷你版的devtool，编程猫kitten的pad版用这个进行真机调试在开发和测试环境使用，生产环境无法使用版用这个进行真机调试在开发和测试环境使用2.Vconsole, star 11.4k 腾讯出品方便使用，同样只适用于开发和测试环境；12import Vconsole from
        </div>

        <div class="bottom">
           <el-button>查看更多</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.index{
  .article{
    .article-item{
      @include panel;
      .title{
        text-align: center;
        line-height: 40px;
        font-size: 16px;
      }
      .desc{
        padding: 10px 100px;
        font-size: 10px;
        display: flex;
        justify-content: space-around;
        li{
          @include flex;
          i{
            margin-right: 5px;
          }
        }
      }
      @media screen and (max-width:768px){
        .desc{
          padding: 10px;
        }
      }
      .fragment{
        text-indent: 2em;
        font-size: 12px;
        color: #999;
      }
      .bottom{
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: center;
      }
    }
  }
}
</style>
